<script lang="ts" setup>
import type { SystemApi } from '#/api/system/system';

import { ElImage } from 'element-plus';

interface Props {
  data?: SystemApi.System;
}

const props = withDefaults(defineProps<Props>(), {
  data: undefined,
});

// 默认图片
const defaultImage = '/favicon.ico';
</script>

<template>
  <div class="flex items-center justify-center">
    <div class="h-12 w-12 p-2">
      <ElImage
        :src="props.data?.image || defaultImage"
        class="h-full w-full rounded"
        fit="cover"
        lazy
      />
    </div>
    <div class="flex flex-col items-start justify-center">
      <div class="truncate text-sm font-medium">
        {{ props.data?.name }}
      </div>
      <div class="truncate text-xs">
        {{ props.data?.url }}
      </div>
    </div>
  </div>
</template>
